<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta content="email=no" name="format-detection" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/hui.css" />

		<link rel="stylesheet" href="../../css/s_plus.css" />
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/layout.css" />
		<link rel="stylesheet" href="../../css/choice.css" />
		<script type="text/javascript" src="../../libs/vue.js"></script>
		<script type="text/javascript" src="../../js/jquery.1.9.1.min.js"></script>
		<script type="text/javascript" src="../../js/app/url.js"></script>
		<script type="text/javascript" src="../../libs/hui.js"></script>
		<script type="text/javascript" src="../../js/s_plus.js"></script>
		<script type="text/javascript" src="../../js/md5.js"></script>
		<script type="text/javascript" src="../../js/app/api.js"></script>
				<script type="text/javascript" src="../../js/mui.min.js"></script>

		<!--<script type="text/javascript" src="../../js/control/mescroll/mescroll.min.js"></script>
		<link rel="stylesheet" href="../../js/control/mescroll/mescroll.min.css" />-->

		<script type="text/javascript" src="../../js/control/swal/sweetalert.min.js"></script>
		<link rel="stylesheet" href="../../js/control/swal/sweetalert.css" />
	</head>

	<body>
		
		
		
		<div id="wrapper">
			<header class="f_l maxbox subhead">
				<a class="back" @click="back"><i class="iconfont">&#xe605;</i></a>
				<h1>终端详情</h1>
			</header>
			<!--<h2 class="f_l maxbox work_state"><i class="iconfont red">&#xe610;</i><b class="mar_l"></b></h2>-->
			<!--<section class="f_l maxbox work_info">
  <p>终端ID：{{jg.TERMIMAL_CODE}}</p>
  <p>井盖ID：{{jg.JG_CODE}}</p>
  <p>责任单位：{{jg.RESP_UNIT}}</p>
  <p>管井类型：{{jg.GJ_TYPE}}</p>
  <p>安装时间：{{jg.INSTALL_TIME}}</p>
  <p>工程状态：{{jg.STATUS}}</p>

</section>-->

			<section class="f_l maxbox txt_list">
				<p>终端信息</p>

				<p><em>终端ID：</em>{{zd.termimalCode}}</p>
				<p><em>责任单位：</em>{{zd.respUnit}}</p>
				<p><em>告警状态：</em>{{showStatus(zd.status)}}</p>
				<p><em>工程状态：</em>生产中</p>
				<p><em>安装时间：</em>{{zd.installTime}}  </p>
				<p><em>经纬度:</em>{{zd.longitude}},{{zd.latitude}} &nbsp;&nbsp;<a @click="nav(zd.latitude,zd.longitude)">导航 <i class="iconfont mar_l"></i></a>
				</p>
		

			</section>
				<section class="f_l maxbox block mar_t">
							<dd class="f_l img_list" style="margin-top:-20px;">
						      <ul>
						        <!--<li><img src="../../images/map.jpg" alt="" /></li>
						        <li><img src="../../images/map.jpg" alt="" /></li>-->
						        <li v-for="item in urls"><img @click="showImg($event)" class="imgs"   :src="item" alt="" /></li>
						      </ul>
						    </dd>			
					</section>
				
			
				<!--
            	private String jgCode;//井盖ID
				private String respUnit;//责任单位
				private String belongStreet;//所属路段
				private String material;//所属材质
				private String model;//型号规格(1圆形，2方形，3外方内圆，4其他)
				private Integer modelSize1;//长度
				private Integer modelSize2;//宽度
				private String constructionTime;//建设时间
				private Integer useFixedYear;//使用年限
				private String blongNetwork;//所属维护网络
				private String createAccount;//信息创建账户
				private String cusId;//客户ID
				private Integer projId;//项目ID
				private String bearLevel;//承载等级
				private String regionId;//所属区域
				private Integer modelSize3;//井边厚
            	
            -->
			
			
				<section class="f_l maxbox txt_list">
				<p><em></em>井盖信息</p>
				<p><em>井盖ID：</em>{{jg.respUnit}}</p>

				<p><em>责任单位：</em>{{jg.respUnit}}</p>
				<p><em>所属路段：</em>{{jg.belongStreet}}</p>
				<p><em>所属材质：</em>{{showMetal(jg.material)}}</p>
				<p><em>型号规格：</em>{{showModel(jg.model)}}</p>
				<p><em>长度(cm)：</em>{{jg.modelSize1}}</p>
				<p><em>宽度(cm)：</em>{{jg.modelSize2}}</p>
				<p><em>井边厚(cm)：</em>{{jg.modelSize3}}</p>
				<p><em>建设时间：</em>{{jg.constructionTime}}</p>
				<p><em>使用年限：</em>{{jg.useFixedYear}}</p>
				<p><em>所属维护网络：</em>{{jg.blongNetwork}}</p>

			</section>
		
 
		</div>

		</section>
		<!--<section class="f_l maxbox mar_t mar_f t_c">
  <a class="btn  minor_btn " href="">进一步处理</a>
  <a class="btn mian_btn mar_l" href="">完成</a>
</section>-->

		<section class="f_l maxbox mar_t mar_f t_c" id="handle">
			<!--<a class="btn mian_btn" href="work_handle.html">处理</a>-->

		</section>

		</div>

		<div class="f_l maxbox mar_t">&nbsp;</div>
		
<script type="text/javascript" src="../../js/control/phoneswipe/photoswipe.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../js/control/phoneswipe/photoswipe-ui-default.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="../../js/control/phoneswipe/photoswipe.css" type="text/css" />		
		<!-- 以下为 phoneSwipe 插件 dom 复制即可 -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container" style="overflow:visible;">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="关闭"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>




		<script>
			
			
			// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}

// 创建并显示新窗口
function create(){
//	alert('22');
// hui.create('http://www.qq.com',{},true,{name:'hcoder', age:18});
//	var w = plus.webview.create( "http://www.bcty365.com" );
//	w.show(); // 显示窗口
}


			
				function previewImg(index){
					var pswpElement = document.querySelectorAll('.pswp')[0];
					var items = [];
					//获取图片数据并填充近数组
					hui('.imgs').each(function(eimg){
						var imgObj = {src:eimg.getAttribute('src'), w:eimg.naturalWidth, h:eimg.naturalHeight};
						items.push(imgObj);
					});
					var options = {index: index};
					var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
					gallery.init();
				}
			
	
			
			var sp = new Vue({
				el: "#wrapper",
				data: {
					jg: {},
					zd:{},
					urls:[]
				},
				methods: {
					tiaozhuan:function(){
						create();
					},
					showImg:function(e){
						var index =  hui(e.currentTarget).index();
//							hui('.imgs').click(function(){
//								var index = hui(this).index();
								previewImg(index);
//							});
					},
					//	型号规格(1圆形，2方形，3外方内圆，4其他)
				showModel:function(param){

					if(param=='1'){
								return "圆形";
							}
							else if(param=='2'){
								return "方形";
							}
							else if (param=='3'){
								return "外方内圆";
							}
							else{
								return "其他";

							}
				},
				
					showStatus:function(param){
						//0无告警；1一般告警；2严重告警；3工单处理中
							if(param=='0'){
								return "无告警";
							}
							else if(param=='1'){
								return "一般告警";
							}
							else if (param=='2'){
								return "严重告警";
							}
							else{
								return "工单处理中";

							}
						},
						showMetal:function(param){
				//1	复合材料	RES_MATERIAL	材质	1	修改 删除 添加键值
				//2	铸铁	RES_MATERIAL	材质	2	修改 删除 添加键值
				//3	水泥	RES_MATERIAL	材质	3	修改 删除 添加键值
				//4	其他
				
				function getCZText(p_text){
					if(p_text=='1'){
						return "复合材料";
					}
					else if(p_text=='2'){
						return "铸铁";
					}
					else if(p_text=='3'){
						return "水泥";
					}
					else{
						return "其他";
					}
				}
				
				if( param==null||param==''){
					return "";
				}
				var czArray=param.split(",");
				var czString = "";
				for (var i=0;i<czArray.length;i++) {
					var cell=czArray[i];
					czString+=" ";
					czString+=getCZText(cell);
				}
				return czString;
				
				},
					nav:function(lat,lng){
							localStorage.setItem("lat", lat);		
						localStorage.setItem("lng", lng);
//						hui.open("nav_baidu.html", {}, true, {});
						
					
						
						console.log("lat---"+lat);
						console.log("lng---"+lng);
//
////						return;
						hui.open("/modules/gisTerminal/navigation.html", {}, true, {});
					},
					back: function() {
						hui.back();
					}
				}

			});
			var cell = localStorage.getItem("cell");
//			sp.jg = JSON.parse(cell);
			console.log(cell);
			
			loadDetail();
			function loadDetail(){
					var cell=localStorage.getItem("cell");
					
					var param = JSON.parse(cell);
					console.log("params--"+cell);
					var username=	localStorage.getItem("username");
					var sec= localStorage.getItem("sec_pwd");
				  	var time = apiManage.getNow();
				  	var key = "loginName="+username+"&passWord="+sec+"&time="+time;
				  	var paramKey=hex_md5(key);
				  	var jsonParam = JSON.stringify({loginName:username,time:time,key:paramKey});
				     console.log("jsonParam:  "+jsonParam);
						var path = urlManager.terminalDetail()+"?terminalCode="+param.TERMIMAL_CODE;
						
						console.log("path:  "+path);
							hui.loading("");
								 $.ajax({
						         type: "GET",
						         url: path,
						         beforeSend: function(request) {
						            request.setRequestHeader("loginName",username);
						            request.setRequestHeader("time",time);
						            request.setRequestHeader("sign",paramKey);
						            request.setRequestHeader("Content-Type","application/text");
						
						         },
						         success: function(result) {
						         	hui.closeLoading();
						          	console.log("终端详情:"+JSON.stringify(result));
						          	
						          	sp.zd=result;
						          	console.log("result.jgId----"+JSON.stringify(result.jgId));
						          	sp.jg=result.jgId;
//									sp.risk=result;
//									sp.lists=result.zds;
									if(result.imgUrl!=null){
										sp.urls = result.imgUrl.split(",");
									}
				
										}		 
						             
						         
						     });
				  
					
					
				}
			

		</script>
	</body>

</html>